<template>
  <div class="mainBox">
    <div class="topBox">
      <div class="createBox">
        <div class="titleBox">
          <p class="animate__animated animate__fadeInTopLeft">
            <i class="el-icon-circle-plus"></i>创建账号
          </p>
        </div>
        <el-form
          :rules="creatRule"
          :model="userDto"
          class="demo-form-inline"
          :inline="true"
          label-width="50px"
          ref="form"
          style="margin-left: 150px"
        >
          <el-form-item label="账号" prop="username">
            <el-input
              :readonly="true"
              type="text"
              aria-autocomplete="false"
              v-model="userDto.username"
              placeholder="点击按钮生成账号"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              type="success"
              circle
              icon="el-icon-refresh"
              @click="createUsername"
            ></el-button>
          </el-form-item>
          <el-form-item label="权限" prop="autho">
            <el-select v-model="userDto.autho" placeholder="选择权限">
              <el-option label="管理员" value="1"></el-option>

              <el-option label="普通用户" value="2"></el-option>
              <el-option label="词条管理员" value="3"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" class="submitBox" @click="createUser"
              >创建</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <div class="picShow">
        <div class="picShow">
          <el-carousel :interval="3000" type="card" height="190px">
            <el-carousel-item v-for="(img, index) in imgList" :key="index">
              <el-image :src="img.url" :fit="fit"></el-image>
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>
    </div>
    <div class="bottomBox">
      <el-table
        highlight-current-row
        @current-change="handleCurrentChange"
        class="tableBox"
        lazy
        style="width: 450px"
        max-height="460"
        :data="userTable"
        empty-text="无相关用户信息"
        :header-cell-style="{ background: 'rgba(235, 245, 243,0.8)' }"
        :header-row-style="{ background: 'rgba(235, 245, 243,0)' }"
        :cell-style="{ background: 'rgba(235, 245, 243,0)' }"
        :row-style="{ background: 'rgba(235, 245, 243, 0)' }"
      >
        <el-table-column fixed prop="phone" label="用户账号" width="140">
        </el-table-column>
        <!-- <el-table-column prop="name" label="姓名"> </el-table-column> -->
        <el-table-column prop="pwd" label="密码" width="150"> </el-table-column>
        <el-table-column prop="level" label="权限等级" width="150">
          <template slot-scope="scope">
            <el-select
              v-model="scope.row[scope.column.property]"
              placeholder="请选择"
              @change="changeLevel(scope.$index, scope.row.level, userTable)"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </template>
        </el-table-column>
      </el-table>
      <div class="bottom-rightBox">
        <el-form
          :inline="true"
          :model="oneUser"
          ref="nameForm"
          class="demo-form-inline"
          style="margin-left: 10px; margin-top: 20px"
        >
          <i class="el-icon-user-solid" style="margin-top: 10px"></i>
          <el-form-item label="" prop="phone">
            <el-input
              type="text"
              aria-autocomplete="false"
              v-model="oneUser.phone"
              placeholder="账号查找"
            >
              <i slot="prefix" class="el-input__icon el-icon-search"></i
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-search"
              class="submitBox"
              circle
            ></el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "AccountManager",
  data() {
    return {
      //创建用户
      userDto: {
        username: "",
        password: "123456",
        autho: "",
      },
      //创建账号传给后端的对象
      resultDto: {
        username: "",
        password: "",
        autho: "",
      },
      //更改用户权限
      userlevelChange: {
        phone: "",
        level: "",
      },
      //用户表格
      userTable: [
        {
          phone: "",
          name: "",
          pwd: "",
          level: "",
        },
      ],
      //创建账号的权限选择框
      options: [
        {
          value: 1,
          label: "管理员",
        },
        {
          value: 2,
          label: "普通用户",
        },
        {
          value: 3,
          label: "词条管理员",
        },
      ],
      //创建账号的表单验证规则
      creatRule: {
        username: [{ required: true, message: "请生成账号", trigger: "blur" }],
        autho: [{ required: true, message: "请选择权限", trigger: "blur" }],
      },
      oneUser: {
        phone: "",
      },
      fit: "cover",
      imgList: [
        {
          url: "http://120.77.71.211:9011/72ad40dde343a9b04c24929932e927ad.jpeg",
        },
        {
          url: "http://120.77.71.211:9011/02882e28cbe35042f7063b7c4331abed.gif",
        },
        {
          url: "http://120.77.71.211:9011/55aa725fc4ac1bc464a573738892a2ff.jpeg",
        },
        {
          url: "http://120.77.71.211:9011/9df48b69798dd53207baf7353ea06fe0.gif",
        },
        {
          url: "http://120.77.71.211:9011/d996a504f6d279b7c67b87609e82af22.gif",
        },
      ],
    };
  },
  methods: {
    handleCurrentChange(val) {
      this.oneUser = val;
      console.log(this.oneUser.phone);
    },
    changeLevel(index, id, rows) {
      console.log(this.oneUser.phone);
      console.log(id);
      this.userlevelChange.phone = this.oneUser.phone;
      this.userlevelChange.level = id;
      // this.$axios.post("http://localhost:9099/user/updateLevel",this.userlevelChange).then((resp) => {
      //   if (resp) {
      //     console.log(resp);
      //   }
      // });
    },
    // allUsers() {
    //   this.$axios.get("http://localhost:9099/user/allUser").then((resp) => {
    //     if (resp) {
    //       this.userTable = resp.data;
    //     }
    //   });
    // },

    //创建用户方法
    createUser() {
      const _this = this;
      this.$refs.form.validate((valid) => {
        if (valid) {
          //设置密码加密（使用md5）
          // _this.userDto.password = _this.$md5(_this.userDto.username+_this.userDto.password);
          _this.resultDto = _this.userDto;
          console.log(_this.resultDto);
          _this.postRequest("/api/register", _this.resultDto).then((res) => {
            if (res.data.code == 200) {
              _this.$message({
                message: "创建账号成功",
                type: "success",
              });
              _this.userDto = {};
              _this.resultDto = {};
            } else {
              _this.$message.error("创建失败！");
            }
          }).catch((err)=>{
            console.log(err)
          });
        } else {
          _this.$message.error("请检查账户或权限的格式！");
          return false;
        }
      });
    },

    //随机生成6位数的账号
    createUsername() {
      const _this = this;
      let username = "";
      for (var i = 0; i < 6; i++) {
        username += parseInt(Math.random() * 10);
      }
      _this.userDto.username = username;
    },

    // findByUserName() {
    //   this.$refs.nameForm.validate((valid) => {
    //     if (valid) {
    //       console.log(this.oneUser.username);
    //       this.$axios
    //         .get(
    //           "http://localhost:9099/user/findByUserName?name=" +
    //             this.oneUser.username
    //         )
    //         .then((resp) => {
    //           this.userTable = [];
    //           this.userTable = resp.data;
    //           console.log(resp);
    //           // this.userTable = resp;
    //         });
    //     } else {
    //       console.log("error submit!!");
    //       return false;
    //     }
    //   });
    // },
  },
  created() {},
};
</script>

<style scoped>
.mainBox {
  margin: 0px 50px auto;
  width: 1285px;
  height: 770px;
  background: rgba(235, 245, 243, 0);
}
.topBox {
  width: 1200px;
  height: 250px;
  margin: 10px auto;
}
.bottomBox {
  width: 1200px;
  height: 60%;
  margin: 40px auto;
}
.createBox {
  width: 600px;
  height: 250px;
  text-align: left;
  float: left;
  background: rgba(255, 255, 255, 0.6);
  box-shadow: 0 0 10px rgb(0, 0, 0);
}
.titleBox {
  width: 200px;
  background: rgb(194, 245, 9);
  margin-top: 0px;
  margin-bottom: 10px;
  margin-left: 50px;
  font-size: 20px;
  font-family: 黑体;
}
.picShow {
  margin-left: 40px;
  margin-top: 20px;
  float: left;
  width: 370px;
  height: 200px;
}
.tableBox {
  float: left;
  margin-left: 70px;
  background: rgba(246, 250, 246, 0.6);
  box-shadow: 0 0 10px rgb(16, 17, 17);
}

.bottom-rightBox {
  float: left;
  width: 450px;
  height: 150px;
  float: left;
  text-align: left;
}
</style>
